<script setup>
import { onMounted, ref } from 'vue'
// 父传子
// 1.给子组件，添加属性的方式传值
// 2.在子组件，通过props接收

// 局部组件(导入进来就能用)
import TestCom from '@/components/test-com.vue'

// 模板引用（可以获取dom，也可以获取组件)
// 1. 调用ref函数，生成一个ref对象
// 2. 通过ref标识，进行绑定
// 3. 通过ref对象.value即可访问到绑定的元素(必须渲染完成后，才能拿到)
const inp = ref(null)

// 生命周期钩子onMounted
onMounted(() => {
  //console.log(inp.value)
  //inp.value.focus()
})
const clickFn = () => {
  inp.value.focus()
}

// 获取组件信息
const testRef = ref(null)
const getCom = () => {
  console.log(testRef.value)
  console.log(testRef.value.count)
  testRef.value.sayHi()
}
</script>

<template>
  <div>
    <div>
      <input ref="inp" type="text">
      <button @click="clickFn">点击让输入框聚焦</button>
    </div>
    <TestCom ref="testRef"></TestCom>
    <button @click="getCom">获取组件</button>
  </div>
</template>


<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
